<template>
    <view class="container">
        <u-navbar
            leftIconSize="44rpx"
            @leftClick="navigateTo('pages/user/index')"
        >
        </u-navbar>
        <view class="msg">{{ grabOrder? '报名成功':'支付成功' }}</view>
        <image
            class="icon_success"
            src="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_success.png"
        ></image>
        <view class="price">
            <text>¥</text>
            <text>{{ grabOrder? grabOrder.payMoney:order.payPrice }}</text>
        </view>
        <view class="total-price" v-if="grabOrder && grabOrder.userTicketId">
            <text>¥</text>
            <text>{{ grabOrder.totalMoney }}</text>
        </view>
        <view class="point" v-if="order.point>0">
            <u-icon
                size="38rpx"
                name="/static/liwu.png"
            ></u-icon>
            <text>获得积分</text>
            <text>+{{ order.point }}</text>
        </view>
        <view class="point" v-if="grabOrder">
            <u-icon
                    size="38rpx"
                    name="/static/liwu.png"
            ></u-icon>
            <text>获得抽奖机会</text>
            <text>1</text>
            <text>次</text>
        </view>
        <view v-if="grabOrder"
              class="activity"
              @click="navigateTo('pages/lottery/index', {activityId: grabOrder.productExt.activityId}, 'navigateTo')"
        >去抽奖</view>
        <view class="mt-90">
            <order-product :product="product"></order-product>
        </view>
        <!--view class="bottom" v-if="grabOrder">
            <u-button
                text="订阅抢购成功通知"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                @click="subscribe()"
            ></u-button>
        </view>
        <view class="bottom" v-else>
            <u-button
                text="返回"
                class="custom-style"
                :customStyle="{
                    background: '#000000',
                    color: '#ffffff'
                }"
                :throttleTime="1500"
                @click="navigateTo('pages/user/index')"
            ></u-button>
        </view--->
    </view>
</template>

<script>
import OrderProduct from "@/components/OrderProduct"
import { getOrderInfo, getGrabOrderInfo } from "@/config/api"
export default {
    components: {
        OrderProduct
    },
    data() {
        return {
            order: {},
            grabOrder: null,
            product: null
        }
    },
    onLoad(option) {
        if (option.grabId) {
            this.getGrabOrderData(option.grabId)
        } else {
            this.getOrderData(option.orderId)
        }
    },
    methods: {
        async getOrderData(orderId) {
            this.order = await getOrderInfo({id: orderId, type: "order"})
            this.product = this.order.product
        },
        async getGrabOrderData(grabId) {
            this.grabOrder = await getGrabOrderInfo(grabId)
            this.product = this.grabOrder.product
            this.product.number = 1
        },
        navigateTo(path, params={}, type="switchTab") {
            uni.$u.route({
				url: path,
                type: type,
				params
			})
        },
        subscribe() {
            uni.requestSubscribeMessage({
                tmplIds: ['Kaa1qBwuX-3i9POJd2GelkaKoyUcF39Hn2yMs33N1lM'],
                success (res) {
                    console.log(res)
                },
                fail(res) {
                    console.log(res)
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
    .container {
        .msg {
            margin-top: 180rpx;
            text-align: center;
            font-size: 38rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #000000;
        }
        .icon_success {
            display: block;
            width: 100rpx;
            height: 100rpx;
            margin-top: 59rpx;
            margin: 55rpx auto;
        }
        .price {
            font-size: 58rpx;
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #000000;
            text-align: center;
            text {
                &:nth-child(1) {
                    font-size: 44rpx;
                }
                &:nth-child(2) {
                    font-size: 58rpx;
                    margin-left: 5rpx;
                }
            }
        }
        .total-price {
            font-family: DINAlternate-Bold, DINAlternate;
            font-weight: bold;
            color: #B6B6B6;
            text-align: center;
            margin-top: 15rpx;
            text {
                &:nth-child(1) {
                    font-size: 26rpx;
                }
                &:nth-child(2) {
                    text-decoration: line-through;
                    font-size: 36rpx;
                    margin-left: 5rpx;
                }
            }
        }
        .mt-90 {
            margin-top: 50rpx;
        }
        .point {
            box-sizing: border-box;
            width: 400rpx;
            height: 60rpx;
            background: #FFF2E8;
            border-radius: 34rpx;
            display: flex;
            margin: 50rpx auto 0 auto;
            padding: 0 25rpx;
            align-items: center;
            justify-content: center;
            text {
                &:nth-child(2) {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #E02020;
                    margin: 0 5rpx 0 10rpx;
                }
                &:nth-child(3) {
                    font-size: 32rpx;
                    font-family: DINAlternate-Bold, DINAlternate;
                    font-weight: bold;
                    color: #E02020;
                    line-height: 60rpx;
                }
                &:nth-child(4) {
                    font-size: 26rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #E02020;
                    margin-left: 5rpx;
                }
            }
        }
        .activity {
            background: url("https://img.ionepin.com/fb5a1587fdeb83d4305f0a9d9bbc00fe6f50f315.png") no-repeat;
            background-size: 100% 100%;
            width: 322rpx;
            height: 78rpx;
            margin: 38rpx auto 24rpx auto;
            font-size: 32rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 78rpx;
        }
        .bottom {
            position: fixed;
            box-sizing: border-box;
            width: 100%;
            padding: 0 20rpx;
            bottom: 33rpx;
            left: 0;
        }
    }
</style>
